<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>KnockOut</title>
</head>
<body>
	 <!-- <span data-bind = "text: firstName"></span> -->
	 <span data-bind = "text: priceRating"></span>
</body>
<script type="text/javascript" src="js/knockout-3.4.0.min.js"></script>
<script type="text/javascript" src="js/knockout-mapping.min.js"></script>
<script type="text/javascript">

//1'、 observable 与 observableArray
    /*
	var myViewModel = {
	    personName: ko.observable('默认这个值'), //这种绑定方式为双向绑定   ko没有单想绑定
	    myObservableArray : ko.observableArray([
	    	{ name: "Bungle", type: "Bear" },
	    	{ name: "Bungle", type: "Bear" }
	    ])
	}
	ko.applyBindings(myViewModel); //第二个参数 是指定使用范围

    // myViewModel.personName.subscribe(function(newValue) {
    //     alert("The person's new name is " + newValue);
    // });  personName() 调用成功之后执行这个函数  
 
    console.log(myViewModel.myObservableArray())
    console.log(myViewModel.myObservableArray().length)
    console.log(myViewModel.myObservableArray()[0])

	setTimeout(function(){
        myViewModel.myObservableArray.extend({ rateLimit: 50 }); 、//??????
		myViewModel.myObservableArray.push('Some value'); 
		myViewModel.personName("动态渲染成功");

		console.log(myViewModel.myObservableArray())
	    console.log(myViewModel.myObservableArray().length)
	    console.log(myViewModel.myObservableArray()[0])
	    console.log(myViewModel.myObservableArray.indexOf('Some value'))  //有原生数组的所有方法
	},3000)
  
     */
//2、Computed Observables

    /*
    var myViewModel = {
    	firstName: "liao",
    	lastName:"zhongxun",
    	AppViewModel: AppViewModel()
    	// fullName:ko.pureComputed(function(){
    	// 	return 5
    	// })
    }
    ko.applyBindings(myViewModel);


    function AppViewModel() {
	     this.firstName = ko.observable('Bob');
         this.lastName = ko.observable('Smith');
         this.fullName = ko.computed(function() { //计算方法
	         return this.firstName() + " " + this.lastName();
	     }, this);

	  //    this.fullName = ko.pureComputed(function() {
		 //     return this.firstName() + " " + this.lastName();
		 // }, this);
	}
	*/

var viewModel = {    
	price: ko.observable(60)
};  
viewModel.priceRating = ko.computed(function() {    
return this.price() > 50 ? "expensive" : "affordable";  
}, viewModel);




</script>
</html>